<template>
	<el-container>
		<el-header height="100px" class="home-head" :class="{'bg-r':showBgColor}">
			<w-header />
		</el-header>
		<el-container class="home-body">
			<el-aside width="auto" class="home-aside" :class="{'bg-g':showBgColor}">
				<el-scrollbar class="h-percent100">
					<w-aside ref="aside"></w-aside>
				</el-scrollbar>
			</el-aside>
			<el-main class="home-main" :class="{'bg-b':showBgColor}">
				<router-view class="common-box" />
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
import WHeader from '@/components/WHeader.vue'
import WAside  from '@/components/WAside.vue'


export default {
	name      : "WHome",
	components: {WHeader, WAside},
	props     : {},
	data() {
		return {
			showBgColor: false
		}
	},
	computed  : {},
	watch     : {},
	methods   : {},
	mounted() {},
}
</script>

<style lang="scss" scoped>
	//不可以在全局定义.el-scrollbar__wrap
	//因为有一个class="el-select-dropdown__wrap el-scrollbar__wrap"有一个样式:
	//margin-bottom: -17px;
	//margin-right: -17px;
	.home-aside /deep/ .el-scrollbar__wrap {
		overflow-x: hidden;
	}

	.home-head {
		padding: 0;
		user-select: none;
		/*border-bottom: 1px solid #f2f6fc;*/
	}

	.home-body {
		height: calc(100% - 100px);
	}

	.home-aside {
		height: 100%;
		background-color: #011c40;
		user-select: none;
		/*border-right: 1px solid #f2f6fc;*/
	}

	.home-main {
		height: 100%;
		padding: 0;
		background-color: #f5f6fa;
	}
</style>
